<template>
  <view class="chatBox">
    <!-- <image :src="i_url" mode="aspectFit" /> -->

    <!-- 时间展示 -->
    <!-- <view class="time">{{ t_time_format(new Date()) }}</view> -->

    <scroll-view
      scroll-y="true"
      scroll-with-animation="true"
      enable-back-to-top="true"
      :scroll-top="toBottom"
      class="content"
      id="myScrollView"
    >
      <!-- <chat_show
        v-for="(item, index) in messageList[m_index].content"
        :key="index"
        :direction="(index + 1) % 2 == 0 || index + 1 > 3 ? 'right' : 'left'"
        :typed="item.typed"
        :content="item.content"
        :avavtar="messageList[m_index].s_avatar"
      ></chat_show> -->
    </scroll-view>

    <view class="input">
      <!-- 编辑框 -->
      <textarea
        cursor-spacing="50"
        class="edit"
        :show-confirm-bar="false"
        :value="editValue"
        placeholder="你有什么想说的吗？"
        placeholder-class="textarea-placeholder"
        maxlength="500"
        @input.stop="editEnd"
        @click.stop=""
      />

      <!-- 图片选择 -->
      <view v-show="editValue == ''" @click="chooseImage" class="chooseImage">
        <uni-icons type="image" size="30" v-show="editValue == ''"></uni-icons>
      </view>

      <view v-show="editValue !== ''" @click="sendMessage" class="sendMessage">
        发送
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { t_time_format } from '@/util/t_format'
import chat_show from '../../components/chat_show/chat_show.vue'
import uniIcons from '../../components/uni/uni-icons/uni-icons.vue'
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
} from '@dcloudio/uni-app'
import { ref } from 'vue'
import { MESSAGE_KEY } from '@/config/constant'
import type { Messages } from '@/config/data/data'

//临时数据
const messageList = ref<Messages[]>([])

//滚动到最底部
const toBottom = ref<number>(0)

//编辑框的值
const editValue = ref<string>('')

//编辑框输入事件
const editEnd = (e: any) => {
  editValue.value = e.target.value
}

//键盘高度

//发送消息事件
const sendMessage = () => {
  console.log('发送消息' + editValue.value)
  let mesaage = editValue.value
  editValue.value = ''
  toBottom.value = toBottom.value + 2000

  console.log(messageList.value)

  uni.setStorage({
    key: MESSAGE_KEY,
    data: JSON.stringify(messageList.value),
  })
  // uni
  //   .createSelectorQuery()
  //   .select('#myScrollView')
  //   .boundingClientRect(function (rect) {

  //   })
  //   .exec()
}

//获取到的图片
const i_url = ref()

//选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths
      i_url.value = tempFilePaths
      console.log(tempFilePaths)
      // messageList.value[m_index.value].content.push({
      //   content: i_url.value,
      //   typed: 'img',
      //   read: true,
      //   s_id: messageList.value[m_index.value].s_id,
      // })
      uni.setStorage({
        key: MESSAGE_KEY,
        data: messageList.value,
      })
    },
  })
}

//消息列表的index
const m_index = ref<number>(0)

// 页面周期函数--监听页面加载
onLoad((e) => {
  if (e) {
    //设置页面标题
    uni.setNavigationBarTitle({
      title: e.username,
    })

    //获取index
    m_index.value = e.index
  }

  uni
    .createSelectorQuery()
    .select('#myScrollView')
    .boundingClientRect(function (rect: any) {
      console.log(rect)
      // uni.pageScrollTo({
      //     scrollTop: rect.height,
      //     duration: 100 // 滑动速度
      //   })
      toBottom.value = rect.height
    })
    .exec()
})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {
  uni.getStorage({
    key: MESSAGE_KEY,
    success: (res) => {
      messageList.value = JSON.parse(res.data)
    },
  })

  uni.showNavigationBarLoading()
  uni.hideNavigationBarLoading()
})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})
</script>

<style scoped lang="scss">
.chatBox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;

  background-color: rgba(225, 244, 242, 0.1);

  .time {
    width: 90rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    margin: 20rpx 0;
    text-align: center;
    color: rgba(30, 30, 30, 0.567);
    background: rgba(201, 200, 200, 0.581);
    border-radius: 4rpx;
    margin: auto;
  }

  .content {
    width: 100%;
    height: 90vh;
  }

  .input {
    width: calc(100% - 30rpx);
    padding: 10rpx 15rpx;
    height: 10vh;
    max-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    margin-top: auto;
    z-index: 9;

    .edit {
      width: calc(100% - 100rpx);
      padding: 10rpx;
      height: 100rpx;
      background-color: rgba(203, 203, 200, 0.279);
      border-radius: 2rpx;
    }

    .chooseImage {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sendMessage {
      font-size: 26rpx;
      width: 80rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 4rpx;
      margin-left: 5rpx;
      background-color: rgb(252, 101, 101);
      color: rgb(255, 255, 255);
    }
  }
}
</style>
